import { ref, onMounted, onUnmounted } from 'vue';

export const useDevice = () => {
  const isMobile = ref(false);

  const checkDevice = () => {
    isMobile.value = window.innerWidth <= 768;

    const ua = navigator.userAgent.toLowerCase();
    const isMobileUA = /mobile|android|iphone|ipad|phone/i.test(ua);
    isMobile.value = isMobile.value || isMobileUA;
  };

  onMounted(() => {
    checkDevice();
    window.addEventListener('resize', checkDevice);
  });

  onUnmounted(() => {
    window.removeEventListener('resize', checkDevice);
  });

  return { isMobile };
};